<template>
    <div class="header">
        <div class="page-header">
            <div class="page-logo">
                <a href="/index.html">
                    <img src="@assets/logo.png" alt="">
                </a>
            </div>
            
            <a href="/index.html">
                <div class="userInfo">
                    返回趣探路网
                </div>
            </a>
        </div>
    </div>

</template>

<script>
    export default {
        name: "pageHeaderWhite",
        props: {},
        data() {
            return {}
        },
        methods: {
            
            jumpPage() {
                window.location.href = '/space.html'
            },
        }
    }
</script>


<style scoped lang="less">
    .header {
        width: 100%;
        min-width: 1128px;
        background-color: #fff;
        height: 70px;
        z-index: 100;
        box-shadow: 0px 2px 10px 0px rgba(112, 83, 6, 0.08);
    }
    
    .page-header {
        position: relative;
        width: 1128px;
        margin: 0 auto;
        z-index: 999;
        height: 70px;
    }
    
    .page-logo {
        position: absolute;
        top: 12px;
        width: 98px;
        height: 48px;
        margin-right: 94px;
        cursor: pointer;
        
        img {
            display: inline-block;
            width: 100%;
            height: auto;
        }
    }
    
    .nav {
        display: inline-block;
        
        margin-left: 192px;
        
        .nav-item {
            position: relative;
            display: inline-block;
            margin-right: 100px;
            font-size: 16px;
            white-space: nowrap;
            line-height: 70px;
            opacity: .8;
            color: #000;
            
            &:hover {
                opacity: 1;
            }
        }
        
        .active {
            opacity: 1;
            font-weight: bold;
        }
        
        /* .active:after {
			 position: absolute;
			 bottom: 0;
			 left: 50%;
			 transform: translateX(-50%);
			 display: block;
			 width: 32px;
			 height: 2px;
			 content: '';
			 background-color: #FFDC20;
		 }*/
    }
    
    .login {
        position: absolute;
        right: 0;
        top: 20px;
        width: 72px;
        height: 32px;
        border-radius: 4px;
        opacity: 0.8;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        font-weight: 300;
        cursor: pointer;
        border: 1px solid #000;
        color: #000;
    }
    
    .login:hover {
        opacity: 1;
    }
    
    .userInfo {
        position: absolute;
        right: 0;
        top: 20px;
        width: 200px;
        height: 52px;
        border-radius: 4px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        font-weight: 300;
        cursor: pointer;
    }
</style>
